<template>
	<view class="collection_styles">

		<!-- tabs -->
		<view class="collection_nav">
			<uni-segmented-control :current="current" @clickItem="onClickMenus" :values="menuItems" styleType="text"
				activeColor="#F15F35">
			</uni-segmented-control>
		</view>

		<!-- 正文 -->
		<view class="collection_main">
			<view v-show="current === 0">
				<ReviewItem v-for="item in reviewList" :item="item" />
			</view>
			<view v-show="current === 1">
				<ArticleShow v-for="item in articleList" :item="item" />
			</view>
			<view v-show="current === 2">
				<ExperienceCard v-for="item in experiencenList" :item="item" />
			</view>
		</view>

	</view>
</template>

<script>
	import ReviewItem from '@/components/ReviewItem.vue'
	import ArticleShow from '@/components/ArticleShow.vue'
	import ExperienceCard from '@/components/ExperienceCard.vue'
	export default {
		components: {
			ReviewItem
		},
		data() {
			return {
				menuItems: ["测试", "文章", "经验"],
				current: 0,
				reviewList: [{
						icon: "../static/logo.png",
						title: "测一测你的精神气质像哪个艺术家",
						desc: "看看你的内心世界，你身上有什么样的艺术气息，发现你的兴趣所在是我我们我们",
						count: "3048"
					},
					{
						icon: "../static/logo.png",
						title: "测一测你的精神气质像哪个艺术家",
						desc: "看看你的内心世界，你身上有什么样的艺术气息，发现你的兴趣所在是我我们我们",
						count: "3048"
					},
				],
				articleList: [{
						url: "../static/logo.png",
						des: "孩子内向不可怕，怕的是养成“回避型人格”，这些表现爸妈要注意",
						date: "10-26 22:24",
						count: "2398",
						tags: ["艺术", "精神", "内心世界"]
					},
					{
						url: "../static/logo.png",
						des: "嗨，我想给你说 | 分享欲是最高级别的浪漫主义",
						date: "10-26 22:24",
						count: "2398",
						tags: ["艺术", "内心世界"]
					},
					{
						url: "../static/logo.png",
						des: "孩子内向不可怕，怕的是养成“回避型人格”，这些表现爸妈要注意",
						date: "10-26 22:24",
						count: "2398",
						tags: ["艺术", "内心世界"]
					},
				],
				experiencenList: [{
						title: "你家孩子不爱吃饭，可以试试这样做",
						images: ["../static/logo.png", ],
						tags: ["吃饭", "生活习惯"],
						date: "10-26 22:24",
						icon: "../static/logo.png",
						name: "一只忧郁的阿黄",
						des: "大家好，我是小黄妈妈，自从我在百度贴吧里写了我家小宝厌食改变成功的经历。每天都有无数网友问我针对小孩怎么好的方法。但由于精力有限，我无法一个一…"
					},
					{
						title: "你家孩子不爱吃饭，可以试试这样做",
						images: ["../static/logo.png", "../static/logo.png", "../static/logo.png"],
						tags: ["吃饭"],
						date: "10-26 22:24",
						icon: "../static/logo.png",
						name: "一只忧郁的阿黄",
						des: "大家好，我是小黄妈妈，自从我在百度贴吧里写了我家小宝厌食改变成功的经历。每天都有无数网友问我针对小孩怎么好的方法。但由于精力有限，我无法一个一…"
					}
				]
			}
		},
		methods: {
			onClickMenus: function(item) {
				this.current = item.currentIndex
			},
		}
	}
</script>

<style>
	.collection_styles {
		width: 100%;
		box-sizing: border-box;
	}

	.collection_nav {
		width: 80%;
		margin: auto;
	}

	.collection_main {
		width: 100%;
	}
</style>
